<template>
  <el-form-item
    class="long-character-label common-form-width"
    label="兑换限制（件/人）"
    prop="productLimit"
    :rules="rules"
  >
    <div class="product-limit-form-wrapper">
      <div class="product-limit">
        <el-radio-group v-model="productLimitSwitchModel">
          <el-radio :label="true">
            限制
          </el-radio>
          <el-radio :label="false">
            不限
          </el-radio>
        </el-radio-group>
      </div>
      <div
        v-if="productLimitSwitchModel"
        class="product-limit"
      >
        <el-select
          v-model="limitTimeTypeModel"
        >
          <el-option
            label="每天"
            value="day"
          />
          <el-option
            label="每周"
            value="week"
          />
          <el-option
            label="每月"
            value="month"
          />
          <el-option
            label="每年"
            value="year"
          />
        </el-select>
        <el-input
          v-model="productLimitModel"
          type="number"
          placeholder="兑换限制"
          :min="1"
          :max="99999999"
        >
          <template #append>
            件/人
          </template>
        </el-input>
      </div>
    </div>
  </el-form-item>
</template>

<script setup lang="ts">
import type { WritableComputedRef } from "vue";
import type { InternalRuleItem } from "async-validator";

const props = defineProps<{
  limitTimeType: string | undefined;
  productLimit: number | undefined;
}>()

const emits = defineEmits<{
  (e: "update:limit-time-type", value: string | undefined):void;
  (e: "update:product-limit", value: number | undefined):void;
}>()

const rules = ref([
  {
    required: true,
    validator(rule: InternalRuleItem, val: undefined, callback: (e?: Error | string) => void) {
      if (!productLimitSwitchModel.value) {
        callback()
        return
      }

      if (!props.productLimit) {
        callback("请填写兑换限制数量")
        return
      }

      if (!/^[1-9]*[1-9][0-9]*$/.test("" + props.productLimit)) {
        callback(new Error("兑换限制仅能为正整数"));
        return
      }

      if (Number(val) > 99999999) {
        callback(new Error("超过上限99999999"));
        return
      }

      callback();
    },
  }
])

const productLimitSwitchModel = ref(false);

watch([ () => props.limitTimeType, () => props.productLimit ], ([ newLimitTimeType, newProductLimit ]) => {
  console.log("newLimitTimeType", newLimitTimeType)
  console.log("newProductLimit", newProductLimit)

  if (newLimitTimeType || newProductLimit) {
    productLimitSwitchModel.value = true;
  }
}, {
  immediate: true
})

watch(productLimitSwitchModel, (newValue) => {
  if (newValue) {
    limitTimeTypeModel.value = "day";
    productLimitModel.value = 1;
  } else {
    limitTimeTypeModel.value = "";
    productLimitModel.value = undefined;
  }
})

const limitTimeTypeModel:WritableComputedRef<string | undefined> = computed({
  set(newValue) {
    emits("update:limit-time-type", newValue)
  },
  get() {
    return props.limitTimeType
  }
})

const productLimitModel:WritableComputedRef<number | undefined> = computed({
  set(newValue) {
    emits("update:product-limit", newValue)
  },
  get() {
    return props.productLimit
  }
})

onMounted(() => {
  console.log("123123123")
})
</script>

<style scoped lang="scss">
.long-character-label:deep(.el-form-item__label) {
  height: unset;
  text-align: right;
  line-height: 1.5;
}
.product-limit-form-wrapper {
  .product-limit:not(:last-child) {
    margin-bottom: 10px;
  }

  .product-limit:deep(.el-select) {
    width: 100px;
    margin-right: 10px;
    .el-input {
      width: 100px;
    }
  }

  .product-limit:deep(.el-input) {
    width: 190px;
  }
}
</style>